<template>
    <div ref="mapechart" class="mapechart">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import * as echarts from 'echarts'
import meishan from './meisan.json'
import chinaJson from '@/assets/china.json';
import 'echarts-gl'; 
const mapechart=ref(null)
onMounted(()=>{
    drawMap()
    // drawLine()
})
const drawMap=()=>{
   
    const jsonMap={
        眉山市:meishan
    }
    const echart=echarts.init(mapechart.value)
    echarts.registerMap('meishan',meishan)
    const option={
        label: {
          normal: {
            show: true, // 省份显示
            fontSize: '10',
            color: 'red'
          },
          emphasis: {
            show: false
          }
        },
        // visualMap: {
        //   min: 0,
        //   max: 100,
        //   left: 'left',
        //   top: 'bottom',
        //   text: ['High', 'Low'],
        //   calculable: true
        // },
        series: [
          {
            type: 'map',
            mapType: 'meishan',
            roam: true,
            label: {
              show: true,
              color: '#fff'
              // normal: {
              //   textStyle: {
              //     color: '#fff'
              //   }
              // }
            },
            itemStyle: {
              normal: {
                areaColor: '#192241',
                borderColor: '#2CE7F6',
                borderWidth: 1, //设置外层边框
                shadowBlur: 5,
                shadowOffsetY: 8,
                shadowOffsetX: 0,
                shadowColor: '#01012a'
              }
            },
            data: [
              
              // 可以加入更多城市的数据
            ]
          }
        ]
    }

    echart.setOption(option)
    echart.on('click', (res:any) => {
        // province = res.name
        // echart = this.$echarts.init(this.$refs.annularEcharts).dispose()
        // this.initImportFile()
        // this.drawProvince()
        console.log(res)
      })
}
const drawLine=()=> {
    
     echarts.registerMap('china',chinaJson)
      // var dataValue = this.dealWithData()
    //   var data1 = dataValue.splice(0, 6)
      const option = {
        geo3D: {
              type: 'map3D',
              map: 'china',
              shading: 'lambert',
              // roam: false, // 关闭拖拽
              // zoom: 3,
              center: [105, 36], // 调整地图位置
              label: {
                normal:{
                  show: true,
                 color: 'rgba(0,0,0,0.7)',
                position:'top',
                fontSize: 16, // 字体大小
                lineHeight:16,
                formatter: function ({ name }:any) {
                return ` ${name}`
              }

                }
                
                // borderWidth: 1, // 边框宽度
                // borderColor: '#fff', // 边框颜色
                // backgroundColor: 'rgba(0,0,0,0)' // 背景颜色，这里设置为透明
            },
                itemStyle: {
                  
                color: '#192241',
                opacity: 0.8,
                borderColor: '#389dff',
                borderWidth: 0.5
              },
              emphasis: {
                disabled:true,
                label: {
          //移入时的高亮文本
              show: true,
              color: "#fff", //显示字体颜色变淡
              fontSize: 18, //显示字体变大
              },
                itemStyle:{
                  areaColor: '#17008d',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                
              },
            
              viewControl: {
              // 旋转与缩放控制
              rotateSensitivity: 1.5,
              zoomSensitivity: 3,
              // 设置地图的倾斜角度
              alpha: 60,   // 上下倾斜角度
              beta: 10,    // 左右倾斜角度
              distance: 100, // 离地图的距离（即厚度，数值越大，越远）
            },
              data:[]
              
            
        },
        series: [
       
        
        //   {
        //     name: '',
        //     type: 'scatter',
        //     coordinateSystem: 'geo',
        //     data: dataValue,
        //     //   symbolSize: function(val) {
        //     //     return val[2] / 10;
        //     //   },
        //     symbol: 'circle',
        //     symbolSize: 8,
        //     hoverSymbolSize: 10,
        //     tooltip: {
        //       formatter(value:any) {
        //         return value.data.name + '<br/>' + '设备数：' + '22'
        //       },
        //       show: true
        //     },
        //     encode: {
        //       value: 2
        //     },
        //     label: {
        //       formatter: '{b}',
        //       position: 'right',
        //       show: false
        //     },
        //     itemStyle: {
        //       color: '#0efacc'
        //     },
        //     emphasis: {
        //       label: {
        //         show: false
        //       }
        //     }
        //   },
        //   {
        //     name: 'Top 5',
        //     type: 'effectScatter',
        //     coordinateSystem: 'geo',
        //     data: data1,
        //     symbolSize: 15,
        //     tooltip: {
        //       show: false
        //     },
        //     encode: {
        //       value: 2
        //     },
        //     showEffectOn: 'render',
        //     rippleEffect: {
        //       brushType: 'stroke',
        //       color: '#0efacc',
        //       period: 9,
        //       scale: 5
        //     },
        //     hoverAnimation: true,
        //     label: {
        //       formatter: '{b}',
        //       position: 'right',
        //       show: true
        //     },
        //     itemStyle: {
        //       color: '#0efacc',
        //       shadowBlur: 2,
        //       shadowColor: '#333'
        //     },
        //     zlevel: 1
        //   }
        ]
      }
      const echart = echarts.init(mapechart.value)
      echart.setOption(option)
      
      echart.on('click', (res:any) => {
        // province = res.name
        // echart = this.$echarts.init(this.$refs.annularEcharts).dispose()
        // this.initImportFile()
        // this.drawProvince()
        console.log(res)
      })
    }

// const drawLine=()=>{
//     const echart = echarts.init(mapechart.value)
//     echarts.registerMap('china',chinaJson)

//     const option = {
//         //   title: {
//         //     text: '中国地图',
//         //     left: 'center',
//         //     top: '20',
//         //   },
//         //   tooltip: {
//         //     trigger: 'item',
//         //   },
//           geo: {
//             map: 'china',
//             zoom: 1.23,
//             roam: false, // 开启平移和缩放
//             center: [105, 36],
//             label: {
//             normal: {
//               show: true, // 省份显示
//               fontSize: '10',
//               color: 'rgba(0,0,0,0.7)'
//             },
//             emphasis: {
//               show: false
//             }
//           },
//             itemStyle: {
//             normal: {
//               areaColor: '#192241',
//               borderColor: '#2CE7F6',
//               borderWidth: 1, //设置外层边框
//               shadowBlur: 5,
//               shadowOffsetY: 8,
//               shadowOffsetX: 0,
//               shadowColor: '#01012a'
//             },
//             emphasis: {
//               areaColor: '#fff',
//               shadowOffsetX: 0,
//               shadowOffsetY: 0,
//               shadowBlur: 5,
//               borderWidth: 0,
//               shadowColor: 'rgba(0, 0, 0, 0.5)'
//             }
//           }
//           },
//           series: [
//           {
//             type: 'map',
//             map: 'china',
//             boxDepth: 75, // 地图倾斜度
//             regionHeight: 6, // 地图高度
//             roam: false,
//             zoom: 1.23,
//             center: [105, 36],
//             // geoIndex: 1,
//             // aspectScale: 0.75, //长宽比
//             showLegendSymbol: false, // 存在legend时显示
//             label: {
//               normal: {
//                 show: false
//               },
//               emphasis: {
//                 show: false,
//                 textStyle: {
//                   color: '#fff'
//                 }
//               }
//             },
//             // 地图样式设置
//             itemStyle: {
//               normal: {
//                 areaColor: {
//                   // color: {
//                   //   type: 'linear',
//                   //   x: 0,
//                   //   y: 0,
//                   //   x2: 1,
//                   //   y2: 1,
//                   //   colorStops: [{
//                   //     offset: 0, color: '#24a0fa'
//                   //   }, {
//                   //     offset: 1, color: '#15072a'
//                   //   }],
//                   //    global: false
//                   // }
//                 },
//                 borderColor: '#389dff',
//                 borderWidth: 0.5
//               },
//               emphasis: {
//                 areaColor: '#17008d',
//                 shadowOffsetX: 0,
//                 shadowOffsetY: 0,
//                 shadowBlur: 5,
//                 borderWidth: 0,
//                 shadowColor: 'rgba(0, 0, 0, 0.5)'
//               }
//             }
//           },
//         //   {
//         //     name: '',
//         //     type: 'scatter',
//         //     coordinateSystem: 'geo',
//         //     data: dataValue,
//         //     //   symbolSize: function(val) {
//         //     //     return val[2] / 10;
//         //     //   },
//         //     symbol: 'circle',
//         //     symbolSize: 8,
//         //     hoverSymbolSize: 10,
//         //     tooltip: {
//         //       formatter(value:any) {
//         //         return value.data.name + '<br/>' + '设备数：' + '22'
//         //       },
//         //       show: true
//         //     },
//         //     encode: {
//         //       value: 2
//         //     },
//         //     label: {
//         //       formatter: '{b}',
//         //       position: 'right',
//         //       show: false
//         //     },
//         //     itemStyle: {
//         //       color: '#0efacc'
//         //     },
//         //     emphasis: {
//         //       label: {
//         //         show: false
//         //       }
//         //     }
//         //   },
//         //   {
//         //     name: 'Top 5',
//         //     type: 'effectScatter',
//         //     coordinateSystem: 'geo',
//         //     data: data1,
//         //     symbolSize: 15,
//         //     tooltip: {
//         //       show: false
//         //     },
//         //     encode: {
//         //       value: 2
//         //     },
//         //     showEffectOn: 'render',
//         //     rippleEffect: {
//         //       brushType: 'stroke',
//         //       color: '#0efacc',
//         //       period: 9,
//         //       scale: 5
//         //     },
//         //     hoverAnimation: true,
//         //     label: {
//         //       formatter: '{b}',
//         //       position: 'right',
//         //       show: true
//         //     },
//         //     itemStyle: {
//         //       color: '#0efacc',
//         //       shadowBlur: 2,
//         //       shadowColor: '#333'
//         //     },
//         //     zlevel: 1
//         //   }
//         ]
//         };
//         echart.setOption(option)
// }
</script>

<style scoped>
.mapechart{
    width:100%;
    height: 100%;
    /* color:#6fb1f4
    409eff
    rgb(254, 163, 163) */
}
</style>